Adwaita: sass, make button mixin export a global $button_fill var

$button_fill contains the background-image property value of
buttons, having it readable outside the drawing mixin allows, for
example, stacking background images in an easier way.

diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss
index 69c7c263d9f17b1cc6f90bf08cac32c6dd57d99f..6e808b3e772cc1776ead7525cfb84f8bfda4a5ba 100644 (file)
--- a/gtk/theme/Adwaita/_drawing.scss
+++ b/gtk/theme/Adwaita/_drawing.scss
@@ -181,7 +181,8 @@
 // backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
 // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
 //
-
+// This mixin sets the $button_fill global variable which containts the button background-image
+//
   $_hilight_color: _button_hilight_color($c);
   $_button_edge: if($edge == none, none, _widget_edge($edge));
   $_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1)));
@@ -194,8 +195,9 @@
     outline-color: transparentize($tc, 0.7);
     border-color: if($c != $bg_color, _border_color($c), $borders_color);
     border-bottom-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
-    @if $variant == 'light' { background-image: linear-gradient(to bottom, $c, darken($c, 4%) 60%, darken($c, 10%)); }
-    @else { background-image: linear-gradient(to bottom, darken($c, 2%), darken($c, 4%) 60%, darken($c, 6%)); }
+    $button_fill: if($variant == 'light', linear-gradient(to bottom, $c, darken($c, 4%) 60%, darken($c, 10%)),
+                                          linear-gradient(to bottom, darken($c, 2%), darken($c, 4%) 60%, darken($c, 6%))) !global;
+    background-image: $button_fill;
     @include _button_text_shadow($tc, $c);
     @include _shadows(inset 0 1px $_hilight_color, $_button_edge);
   }
@@ -209,15 +211,16 @@
     border-color: if($c != $bg_color, _border_color($c), $borders_color);
     border-bottom-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
     @if $variant == 'light' {
-      background-image: linear-gradient(to bottom, lighten($c, 6%), $c 60%, darken($c, 4%));
+      $button_fill: linear-gradient(to bottom, lighten($c, 6%), $c 60%, darken($c, 4%)) !global;
       @include _button_text_shadow($tc, lighten($c, 6%));
       @include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)), $_button_edge);
     }
     @else {
-      background-image: linear-gradient(to bottom, lighten($c, 1%), darken($c, 2%) 60%, darken($c, 4%));
+      $button_fill: linear-gradient(to bottom, lighten($c, 1%), darken($c, 2%) 60%, darken($c, 4%)) !global;
       @include _button_text_shadow($tc,lighten($c, 6%));
       @include _shadows(inset 0 1px _button_hilight_color(darken($c, 2%)), $_button_edge);
     }
+    background-image: $button_fill;
   }
 
   @if $t==normal-alt {
@@ -252,22 +255,22 @@
     outline-color: transparentize($tc, 0.7);
     border-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
     @if $variant == 'light' {
-      background-image: linear-gradient(to bottom, lighten($c, 9%) 10%, lighten($c, 4%) 90%);
-      box-shadow: inset 0 1px _button_hilight_color(lighten($c, 6%)),
-                  inset 0 -2px lighten($c, 5%),
-                  inset 0 -1px darken($c, 10%),
-                  $_button_edge;
+      $button_fill: linear-gradient(to bottom, lighten($c, 9%) 10%, lighten($c, 4%) 90%) !global;
+      @include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)),
+                        inset 0 -2px lighten($c, 5%),
+                        inset 0 -1px darken($c, 10%),
+                        $_button_edge);
     }
     @else {
-      background-image: linear-gradient(to bottom, $c 20%, darken($c, 4%) 90%);
+      $button_fill: linear-gradient(to bottom, $c 20%, darken($c, 4%) 90%) !global;
       @include _shadows(inset 0 1px $_hilight_color,
                         inset 0 -2px darken($c, 3%),
                         inset 0 -1px darken($c, 6%),
                         $_button_edge);
     }
+    background-image: $button_fill;
   }
 
-
   @else if $t==active {
   //
   // pushed button
@@ -275,12 +278,14 @@
     color: $tc;
     outline-color: transparentize($tc, 0.7);
     border-color: if($c != $bg_color, _border_color($c), $borders_color);
-    background-image: image(darken($c, 6%));
+    $button_fill: image(darken($c, 6%)) !global;
+    background-image: $button_fill;
     @include _shadows(inset 0 1px transparentize($_hilight_color, 1), $_button_edge);
 
     text-shadow: none;
     -gtk-icon-shadow: none;
   }
+
   @else if $t==insensitive {
   //
   // insensitive button
@@ -290,13 +295,15 @@
     label, & { color: if($tc != $fg_color, mix($tc, $_bg, 50%), $insensitive_fg_color); }
 
     border-color: if($c != $bg_color, _border_color($c), $insensitive_borders_color);
-    background-image: image($_bg);
+    $button_fill: image($_bg) !global;
+    background-image: $button_fill;
     text-shadow: none;
     -gtk-icon-shadow: none;
     // white with 0 alpha to avoid an ugly transition, since no color means
     // black with 0 alpha
     @include _shadows(inset 0 1px transparentize(white, 1), $_button_edge);
   }
+
   @else if $t==insensitive-active {
   //
   // insensitive pushed button
@@ -307,7 +314,8 @@
     label, & { color: if($c != $bg_color, mix($tc, $_bg, 60%), $insensitive_fg_color); }
 
     border-color: $_bc;
-    background-image: image($_bg);
+    $button_fill: image($_bg) !global;
+    background-image: $button_fill;
     // white with 0 alpha to avoid an ugly transition, since no color means
     // black with 0 alpha
     @include _shadows(inset 0 1px transparentize(white, 1), $_button_edge);
@@ -323,7 +331,8 @@
     label, & { color: if($tc != $fg_color, mix($tc, $_bg, 80%), $backdrop_fg_color); }
 
     border-color: if($c != $bg_color, $_bc, $backdrop_borders_color);
-    background-image: image($_bg);
+    $button_fill: image($_bg) !global;
+    background-image: $button_fill;
     text-shadow: none;
     -gtk-icon-shadow: none;
     @include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge);
@@ -339,7 +348,8 @@
     label, & { color: if($tc != $fg_color, mix($tc, $_bg, 80%), $backdrop_fg_color); }
 
     border-color: if($c != $bg_color, $_bc, $backdrop_borders_color);
-    background-image: image($_bg);
+    $button_fill: image($_bg) !global;
+    background-image: $button_fill;
     @include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge);
   }
 
@@ -354,7 +364,8 @@
     label, & { color: if($c != $bg_color, mix($tc, $_bg, 35%), $backdrop_insensitive_color); }
 
     border-color: if($c != $bg_color, $_bc, $backdrop_borders_color);
-    background-image: image($_bg);
+    $button_fill: image($_bg) !global;
+    background-image: $button_fill;
     text-shadow: none;
     -gtk-icon-shadow: none;
     // white with 0 alpha to avoid an ugly transition, since no color means
@@ -373,7 +384,8 @@
     label { color: if($c != $bg_color, mix($tc, $_bg, 35%), $backdrop_insensitive_color); }
 
     border-color: if($c != $bg_color, $_bc, $backdrop_borders_color);
-    background-image: image($_bg);
+    $button_fill: image($_bg) !global;
+    background-image: $button_fill;
     @include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge);
   }
 
@@ -386,13 +398,15 @@
     color: $osd_fg_color;
     border-color: $osd_borders_color;
     background-color: transparent;
-    background-image: image($_bg);
+    $button_fill: image($_bg) !global;
+    background-image: $button_fill;
     background-clip: padding-box;
     box-shadow: inset 0 1px transparentize(white, 0.9);
     text-shadow: 0 1px black;
     -gtk-icon-shadow: 0 1px black;
     outline-color: transparentize($osd_fg_color, 0.7);
   }
+
   @else if $t==osd-hover {
   //
   // active osd button
@@ -402,13 +416,15 @@
     color: white;
     border-color: $osd_borders_color;
     background-color: transparent;
-    background-image: image($_bg);
+    $button_fill: image($_bg) !global;
+    background-image: $button_fill;
     background-clip: padding-box;
     box-shadow: inset 0 1px transparentize(white, 0.9);
     text-shadow: 0 1px black;
     -gtk-icon-shadow: 0 1px black;
     outline-color: transparentize($osd_fg_color, 0.7);
   }
+
   @else if $t==osd-active {
   //
   // active osd button
@@ -418,13 +434,15 @@
     color: white;
     border-color: $osd_borders_color;
     background-color: transparent;
-    background-image: image($_bg);
+    $button_fill: image($_bg) !global;
+    background-image: $button_fill;
     background-clip: padding-box;
     box-shadow: none;
     text-shadow: none;
     -gtk-icon-shadow: none;
     outline-color: transparentize($osd_fg_color, 0.7);
   }
+
   @else if $t==osd-insensitive {
   //
   // insensitive osd button
@@ -432,12 +450,14 @@
     color: $osd_insensitive_fg_color;
     border-color: $osd_borders_color;
     background-color: transparent;
-    background-image: image($osd_insensitive_bg_color);
+    $button_fill: image($osd_insensitive_bg_color) !global;
+    background-image: $button_fill;
     background-clip: padding-box;
     box-shadow: none;
     text-shadow: none;
     -gtk-icon-shadow: none;
   }
+
   @else if $t==osd-backdrop {
   //
   // backdrop osd button
@@ -447,19 +467,22 @@
     color: $osd_fg_color;
     border-color: $osd_borders_color;
     background-color: transparent;
-    background-image: image($_bg);
+    $button_fill: image($_bg) !global;
+    background-image: $button_fill;
     background-clip: padding-box;
     box-shadow: none;
     text-shadow: none;
     -gtk-icon-shadow: none;
   }
+
   @else if $t==undecorated {
   //
   // reset
   //
     border-color: transparent;
     background-color: transparent;
-    background-image: none;
+    $button_fill: none !global;
+    background-image: $button_fill;
 
     @include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge);
 

diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index e34b0ec192d5a1375056b0d6cd8603cefd78ceff..2fad5d717e43c6a4ab6b1b8377557d8b79ba6747 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -437,10 +437,10 @@ button {
     outline-color: rgba(238, 238, 236, 0.3);
     border-color: #1b1f20;
     border-bottom-color: #0b0c0c;
-    background-image: linear-gradient(to bottom, #353c3e, #2e3436 60%, #2a2e30);
     text-shadow: 0 -1px rgba(0, 0, 0, 0.77945);
     -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.77945);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
+    background-image: linear-gradient(to bottom, #353c3e, #2e3436 60%, #2a2e30);
     -gtk-icon-effect: highlight; }
   notebook > header > tabs > arrow:active, button.titlebutton:active, notebook > header > tabs > arrow:checked, button.titlebutton:checked,
   button:active,
@@ -777,10 +777,10 @@ button.suggested-action {
     outline-color: rgba(255, 255, 255, 0.3);
     border-color: #0f2b48;
     border-bottom-color: #06121e;
-    background-image: linear-gradient(to bottom, #2260a0, #1f5894 60%, #1d538b);
     text-shadow: 0 -1px rgba(0, 0, 0, 0.65553);
     -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.65553);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); }
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
+    background-image: linear-gradient(to bottom, #2260a0, #1f5894 60%, #1d538b); }
   button.suggested-action:active,
   button.suggested-action:checked {
     color: white;
@@ -959,10 +959,10 @@ button.destructive-action {
     outline-color: rgba(255, 255, 255, 0.3);
     border-color: #760909;
     border-bottom-color: #470505;
-    background-image: linear-gradient(to bottom, #da1010, #cc0f0f 60%, #c20f0f);
     text-shadow: 0 -1px rgba(0, 0, 0, 0.59278);
     -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.59278);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0.2); }
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.2);
+    background-image: linear-gradient(to bottom, #da1010, #cc0f0f 60%, #c20f0f); }
   button.destructive-action:active,
   button.destructive-action:checked {
     color: white;
@@ -1193,10 +1193,10 @@ button.needs-attention > image, stacksidebar row.needs-attention > label {
     outline-color: rgba(238, 238, 236, 0.3);
     border-color: #1b1f20;
     border-bottom-color: #0b0c0c;
-    background-image: linear-gradient(to bottom, #353c3e, #2e3436 60%, #2a2e30);
     text-shadow: 0 -1px rgba(0, 0, 0, 0.77945);
     -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.77945);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); }
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
+    background-image: linear-gradient(to bottom, #353c3e, #2e3436 60%, #2a2e30); }
   .inline-toolbar toolbutton > button:active, .inline-toolbar toolbutton > button:checked {
     color: #eeeeec;
     outline-color: rgba(238, 238, 236, 0.3);
@@ -1754,10 +1754,10 @@ headerbar {
         outline-color: rgba(255, 255, 255, 0.3);
         border-color: #0f2b48;
         border-bottom-color: #06121e;
-        background-image: linear-gradient(to bottom, #2260a0, #1f5894 60%, #1d538b);
         text-shadow: 0 -1px rgba(0, 0, 0, 0.65553);
         -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.65553);
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); }
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
+        background-image: linear-gradient(to bottom, #2260a0, #1f5894 60%, #1d538b); }
       .selection-mode.titlebar:not(headerbar) button:active, .selection-mode.titlebar:not(headerbar) button:checked,
       headerbar.selection-mode button:active,
       headerbar.selection-mode button:checked {
@@ -1883,10 +1883,10 @@ headerbar {
           outline-color: rgba(238, 238, 236, 0.3);
           border-color: #1b1f20;
           border-bottom-color: #0b0c0c;
-          background-image: linear-gradient(to bottom, #353c3e, #2e3436 60%, #2a2e30);
           text-shadow: 0 -1px rgba(0, 0, 0, 0.77945);
           -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.77945);
           box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
+          background-image: linear-gradient(to bottom, #353c3e, #2e3436 60%, #2a2e30);
           border-color: #0f2b48; }
         .selection-mode.titlebar:not(headerbar) button.suggested-action:active,
         headerbar.selection-mode button.suggested-action:active {
@@ -2712,8 +2712,8 @@ switch {
     color: #eeeeec;
     outline-color: rgba(238, 238, 236, 0.3);
     border-color: #0b0c0c;
-    background-image: linear-gradient(to bottom, #33393b 20%, #2a2e30 90%);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -2px #2c3133, inset 0 -1px #25292b, 0 1px rgba(0, 0, 0, 0.1); }
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -2px #2c3133, inset 0 -1px #25292b, 0 1px rgba(0, 0, 0, 0.1);
+    background-image: linear-gradient(to bottom, #33393b 20%, #2a2e30 90%); }
   switch:checked slider {
     border: 1px solid #0f2b48; }
   switch:disabled slider {
@@ -2817,8 +2817,8 @@ radio {
     color: #eeeeec;
     outline-color: rgba(238, 238, 236, 0.3);
     border-color: #0b0c0c;
-    background-image: linear-gradient(to bottom, #33393b 20%, #2a2e30 90%);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -2px #2c3133, inset 0 -1px #25292b, 0 1px rgba(0, 0, 0, 0.1); }
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -2px #2c3133, inset 0 -1px #25292b, 0 1px rgba(0, 0, 0, 0.1);
+    background-image: linear-gradient(to bottom, #33393b 20%, #2a2e30 90%); }
   check:active,
   radio:active {
     color: #eeeeec;
@@ -3080,8 +3080,8 @@ scale {
       color: #eeeeec;
       outline-color: rgba(238, 238, 236, 0.3);
       border-color: #0b0c0c;
-      background-image: linear-gradient(to bottom, #33393b 20%, #2a2e30 90%);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -2px #2c3133, inset 0 -1px #25292b, 0 1px rgba(0, 0, 0, 0.1); }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -2px #2c3133, inset 0 -1px #25292b, 0 1px rgba(0, 0, 0, 0.1);
+      background-image: linear-gradient(to bottom, #33393b 20%, #2a2e30 90%); }
     scale slider:active {
       border-color: #0f2b48; }
     scale slider:disabled {
@@ -4192,10 +4192,10 @@ infobar {
         outline-color: rgba(255, 255, 255, 0.3);
         border-color: #0f2b48;
         border-bottom-color: #06121e;
-        background-image: linear-gradient(to bottom, #2260a0, #1f5894 60%, #1d538b);
         text-shadow: 0 -1px rgba(0, 0, 0, 0.65553);
         -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.65553);
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); }
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
+        background-image: linear-gradient(to bottom, #2260a0, #1f5894 60%, #1d538b); }
       infobar.info button:active, infobar.info button:checked, infobar.question button:active, infobar.question button:checked, infobar.warning button:active, infobar.warning button:checked, infobar.error button:active, infobar.error button:checked {
         color: #ffffff;
         outline-color: rgba(255, 255, 255, 0.3);
@@ -4327,10 +4327,10 @@ colorswatch#add-color-button {
       outline-color: rgba(238, 238, 236, 0.3);
       border-color: #1b1f20;
       border-bottom-color: #0b0c0c;
-      background-image: linear-gradient(to bottom, #353c3e, #2e3436 60%, #2a2e30);
       text-shadow: 0 -1px rgba(0, 0, 0, 0.77945);
       -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.77945);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); }
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
+      background-image: linear-gradient(to bottom, #353c3e, #2e3436 60%, #2a2e30); }
     colorswatch#add-color-button overlay:backdrop {
       border-color: #202425;
       background-image: image(#33393b);

diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 0f181e1826532d69bd3b4710159c454116fceb08..041e4c65bd9d8296e4410c8e17a4c87cd2cf5f16 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -437,10 +437,10 @@ button {
     outline-color: rgba(46, 52, 54, 0.3);
     border-color: #b6b6b3;
     border-bottom-color: #91918c;
-    background-image: linear-gradient(to bottom, #f7f7f7, #e8e8e7 60%, #dededd);
     text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
     -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
     box-shadow: inset 0 1px white;
+    background-image: linear-gradient(to bottom, #f7f7f7, #e8e8e7 60%, #dededd);
     -gtk-icon-effect: highlight; }
   notebook > header > tabs > arrow:active, button.titlebutton:active, notebook > header > tabs > arrow:checked, button.titlebutton:checked,
   button:active,
@@ -780,10 +780,10 @@ button.suggested-action {
     outline-color: rgba(255, 255, 255, 0.3);
     border-color: #215d9c;
     border-bottom-color: #184472;
-    background-image: linear-gradient(to bottom, #63a0de, #4a90d9 60%, #3986d5);
     text-shadow: 0 -1px rgba(0, 0, 0, 0.49553);
     -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.49553);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0.4); }
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
+    background-image: linear-gradient(to bottom, #63a0de, #4a90d9 60%, #3986d5); }
   button.suggested-action:active,
   button.suggested-action:checked {
     color: white;
@@ -962,10 +962,10 @@ button.destructive-action {
     outline-color: rgba(255, 255, 255, 0.3);
     border-color: #a60c0c;
     border-bottom-color: #760909;
-    background-image: linear-gradient(to bottom, #f14545, #ef2929 60%, #ee1616);
     text-shadow: 0 -1px rgba(0, 0, 0, 0.51278);
     -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.51278);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0.4); }
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
+    background-image: linear-gradient(to bottom, #f14545, #ef2929 60%, #ee1616); }
   button.destructive-action:active,
   button.destructive-action:checked {
     color: white;
@@ -1196,10 +1196,10 @@ button.needs-attention > image, stacksidebar row.needs-attention > label {
     outline-color: rgba(46, 52, 54, 0.3);
     border-color: #b6b6b3;
     border-bottom-color: #91918c;
-    background-image: linear-gradient(to bottom, #f7f7f7, #e8e8e7 60%, #dededd);
     text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
     -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-    box-shadow: inset 0 1px white; }
+    box-shadow: inset 0 1px white;
+    background-image: linear-gradient(to bottom, #f7f7f7, #e8e8e7 60%, #dededd); }
   .inline-toolbar toolbutton > button:active, .inline-toolbar toolbutton > button:checked {
     color: #2e3436;
     outline-color: rgba(46, 52, 54, 0.3);
@@ -1763,10 +1763,10 @@ headerbar {
         outline-color: rgba(255, 255, 255, 0.3);
         border-color: #215d9c;
         border-bottom-color: #184472;
-        background-image: linear-gradient(to bottom, #63a0de, #4a90d9 60%, #3986d5);
         text-shadow: 0 -1px rgba(0, 0, 0, 0.49553);
         -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.49553);
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0.4); }
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
+        background-image: linear-gradient(to bottom, #63a0de, #4a90d9 60%, #3986d5); }
       .selection-mode.titlebar:not(headerbar) button:active, .selection-mode.titlebar:not(headerbar) button:checked,
       headerbar.selection-mode button:active,
       headerbar.selection-mode button:checked {
@@ -1892,10 +1892,10 @@ headerbar {
           outline-color: rgba(46, 52, 54, 0.3);
           border-color: #b6b6b3;
           border-bottom-color: #91918c;
-          background-image: linear-gradient(to bottom, #f7f7f7, #e8e8e7 60%, #dededd);
           text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
           -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
           box-shadow: inset 0 1px white;
+          background-image: linear-gradient(to bottom, #f7f7f7, #e8e8e7 60%, #dededd);
           border-color: #184472; }
         .selection-mode.titlebar:not(headerbar) button.suggested-action:active,
         headerbar.selection-mode button.suggested-action:active {
@@ -2728,8 +2728,8 @@ switch {
     color: #2e3436;
     outline-color: rgba(46, 52, 54, 0.3);
     border-color: #91918c;
-    background-image: linear-gradient(to bottom, #fefefe 10%, #f2f2f1 90%);
-    box-shadow: inset 0 1px white, inset 0 -2px #f4f4f4, inset 0 -1px #cfcfcd, 0 1px rgba(0, 0, 0, 0.1); }
+    box-shadow: inset 0 1px white, inset 0 -2px #f4f4f4, inset 0 -1px #cfcfcd, 0 1px rgba(0, 0, 0, 0.1);
+    background-image: linear-gradient(to bottom, #fefefe 10%, #f2f2f1 90%); }
   switch:checked slider {
     border: 1px solid #184472; }
   switch:disabled slider {
@@ -2844,8 +2844,8 @@ radio {
     color: #2e3436;
     outline-color: rgba(46, 52, 54, 0.3);
     border-color: #91918c;
-    background-image: linear-gradient(to bottom, #fefefe 10%, #f2f2f1 90%);
-    box-shadow: inset 0 1px white, inset 0 -2px #f4f4f4, inset 0 -1px #cfcfcd, 0 1px rgba(0, 0, 0, 0.1); }
+    box-shadow: inset 0 1px white, inset 0 -2px #f4f4f4, inset 0 -1px #cfcfcd, 0 1px rgba(0, 0, 0, 0.1);
+    background-image: linear-gradient(to bottom, #fefefe 10%, #f2f2f1 90%); }
   check:active,
   radio:active {
     color: #2e3436;
@@ -3111,8 +3111,8 @@ scale {
       color: #2e3436;
       outline-color: rgba(46, 52, 54, 0.3);
       border-color: #91918c;
-      background-image: linear-gradient(to bottom, #fefefe 10%, #f2f2f1 90%);
-      box-shadow: inset 0 1px white, inset 0 -2px #f4f4f4, inset 0 -1px #cfcfcd, 0 1px rgba(0, 0, 0, 0.1); }
+      box-shadow: inset 0 1px white, inset 0 -2px #f4f4f4, inset 0 -1px #cfcfcd, 0 1px rgba(0, 0, 0, 0.1);
+      background-image: linear-gradient(to bottom, #fefefe 10%, #f2f2f1 90%); }
     scale slider:active {
       border-color: #184472; }
     scale slider:disabled {
@@ -4223,10 +4223,10 @@ infobar {
         outline-color: rgba(255, 255, 255, 0.3);
         border-color: #215d9c;
         border-bottom-color: #184472;
-        background-image: linear-gradient(to bottom, #63a0de, #4a90d9 60%, #3986d5);
         text-shadow: 0 -1px rgba(0, 0, 0, 0.49553);
         -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.49553);
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0.4); }
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
+        background-image: linear-gradient(to bottom, #63a0de, #4a90d9 60%, #3986d5); }
       infobar.info button:active, infobar.info button:checked, infobar.question button:active, infobar.question button:checked, infobar.warning button:active, infobar.warning button:checked, infobar.error button:active, infobar.error button:checked {
         color: #ffffff;
         outline-color: rgba(255, 255, 255, 0.3);
@@ -4358,10 +4358,10 @@ colorswatch#add-color-button {
       outline-color: rgba(46, 52, 54, 0.3);
       border-color: #b6b6b3;
       border-bottom-color: #91918c;
-      background-image: linear-gradient(to bottom, #f7f7f7, #e8e8e7 60%, #dededd);
       text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
       -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-      box-shadow: inset 0 1px white; }
+      box-shadow: inset 0 1px white;
+      background-image: linear-gradient(to bottom, #f7f7f7, #e8e8e7 60%, #dededd); }
     colorswatch#add-color-button overlay:backdrop {
       border-color: #c0c0bd;
       background-image: image(#e8e8e7);